
<script type="text/javascript">
	jQuery(document).ready(function() {
		$("#user_name").blur(function() { 
			if($(this).val() != ''){
				// Gán text cho class thongbao trước khi AJAX response
				$(".thongbao").html('Đang kiểm tra tên người dùng'); 
			}
			// Dữ liệu sẽ gởi đi
			var form_data = {
				action: 'check_user',	
				user_name: $(this).val()
			};
			
			$.ajax({
				type: "POST",				// Phương thức gởi đi
				url: "check.php",			// File xử lý dữ liệu được gởi
				data: form_data,			// Dữ liệu gởi đến cho url 
				success: function(result) { // Hàm chạy khi dữ liệu gởi thành công
					$(".thongbao").html(result);	
				}
			});
		});
	});
</script>

<div class="content">
	<form id="msform" action="" method="POST">
		<div class="clear"></div>
	<!-- Progressbar -->
		<ul id="progressbar">
			<li class="active">Account Setup</li>
		    <li>Social Profiles</li>
		    <li>Personal Details</li>
		</ul>
		<!-- fieldset -->
		<fieldset>

			<h2 class="fs-title">Create Your Account</h2>
			<h3 class="fs-subtitle">This is step 1</h3>
			<?php
				echo $mes;
			?>
			<input type="text" name="user_name" id="user_name" placeholder="Tên đăng nhập" class="required" />
			<div class="thongbao"></div>
			<input type="password" name="txtPass" placeholder="Password" id="password" class="required" />
			<input type="password" name="txtCPass" placeholder="Confirm Password" class="required" />
			<input type="text" name="txtEmail" placeholder="Email"  class="required email" class="required" />
			<br/>
			<input type="button" name="next" class="hieu next action-button" value="Next" />
			
		</fieldset>

		<fieldset>
			<h2 class="fs-title">Social Profiles</h2>
			<h3 class="fs-subtitle">This is step 2</h3>
			<input type="text" name="twitter" placeholder="Twitter"  />
			<input type="text" name="facebook" placeholder="Facebook"  />
			<input type="text" name="gplus" placeholder="Google Plus"  />
			<input type="button" name="previous" class="previous action-button" value="Previous" />
			<input type="button" name="next" class="next action-button" value="Next" />
		</fieldset>

		<fieldset>
			<h2 class="fs-title">Personal Details</h2>
			<h3 class="fs-subtitle">This is step 3</h3>
			<input type="text" name="fname" placeholder="First Name"  />
			<input type="text" name="lname" placeholder="Last Name"  />
			<input type="text" name="phone" placeholder="Phone"  />
			<textarea name="address" placeholder="address"></textarea>
			<input type="button" name="previous" class="previous action-button" value="Previous" />
			<input type="submit" name="btnSubmit" class="submit action-button" value="Submit" />
		</fieldset>
	</form>
	
</div>
<!-- jQuery easing plugin -->

<script src="jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
	 	jQuery('#msform').validate({
			rules: {
				txtUser: {
					required: true,
					minlength: 4
				},
				txtPass: {
					
				},
				txtCPass: {
					required: true,
					equalTo: "#password"
				}
		},
		});
	 }); 
</script>